<template>
	<view class="page">
		<u-navbar back-icon-color="#fff" :back-text-style="{color:'#fff'}" :border-bottom="false" :is-back="true"
			back-text="设备日志" :background="{ background:'#357BED'}"></u-navbar>

		<view class="search">
			<u-search @search="search" shape="square" :show-action="false" input-align="center" placeholder="搜索"
				v-model="keyword"></u-search>
		</view>

		<view class="list">
			<view v-for="(item,index) in list" :key="index" class="item">
				<view class="body">
					<view class="title">
						<text>消防故障</text>
					</view>
					<view class="infor">
						<view class="infor-2 flex-between">
							<text class="data-info">[22222]，达芬奇故居，lp645312512设备光源达芬奇故居，lp645312512设备光源</text>
							<u-icon name="arrow-right" color="#909399" size="26"></u-icon>
						</view>
						<view class="infor-2">
							<text>2021-06-18 00:22:33</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<u-empty margin-top="160" :show="list.length == 0" text="暂无数据" mode="list"></u-empty>

		<u-back-top :scroll-top="scrollTop"></u-back-top>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				scrollTop: 0,
				list:[]
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {

		},
		onReady() {

		},
		methods: {
			search(val) {
				console.log(val)
			}
		},

	};
</script>

<style scoped lang="scss">
	.search {
		padding: 20rpx;
		background-color: white;
	}

	.list {
		padding: 14rpx 0;
	}

	.item {
		background-color: #fff;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;

		.body {
			color: #383838;
			flex: 1;

			.title {
				font-size: 32rpx;
				padding-bottom: 10rpx;
			}

			.infor {
				flex: 1;

				.infor-2 {
					font-size: 28rpx;
					color: #8A8A8A;
					padding-bottom: 10rpx;

					.data-info {
						flex: 1;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
				}
			}
		}

	}
</style>
